<template>
	<div class="wrap">
		<div id="keycodebox" class="nocopy">
			<div class="inp">
				<input v-model="number" ref="input" type="text" class="layui-input" id="number">
				<div class="layui-icon empty" @click="number=''">
					<u-icon name="close-circle-fill" ></u-icon>
				</div>
			</div>

			<div class="layui-row" id="keycode" style="margin-top: 4px;">

				<div class="layui-col-xs8" id="keycodenum">
					<div>
						<div class="layui-col-xs4  item key" @click="keyClick('1')"><span>1</span></div>
						<div class="layui-col-xs4  item key" @click="keyClick('2')"><span>2</span></div>
						<div class="layui-col-xs4  item key" @click="keyClick('3')"><span>3</span></div>
						<div class="layui-col-xs4  item key" @click="keyClick('4')"><span>4</span></div>
						<div class="layui-col-xs4  item key" @click="keyClick('5')"><span>5</span></div>
						<div class="layui-col-xs4  item key" @click="keyClick('6')"><span>6</span></div>
						<div class="layui-col-xs4  item key" @click="keyClick('7')"><span>7</span></div>
						<div class="layui-col-xs4  item key" @click="keyClick('8')"><span>8</span></div>
						<div class="layui-col-xs4  item key" @click="keyClick('9')"><span>9</span></div>
					</div>
					<div>
						<div class="layui-col-xs8 item2 key" @click="keyClick('0')"><span>0</span></div>
						<div class="layui-col-xs4  item key" @click="keyClick('.')"><span>.</span></div>
					</div>
				</div>
				<div class="layui-col-xs4" style="padding-left: 10px;">

					<div class="code_del layui-col-xs12 item3" style="height: 62.22px;" @click="numberDelete">
						<span class="layui-bg-blue">删除</span>
					</div>

					<div class="code_enter layui-col-xs12 item3" style="height: 186.66px" @click="save">
                        <span class="layui-bg-green">确<br>定</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				meta: {
					title: "编辑数量"
                },
                number:'',
			}
		},
		provide() {
			return {
				vm: this
			}
		},
		inject: ['vm'],
		mounted() {
			this.$nextTick(() => {
				this.$refs.input.focus();
			})
		},
		methods: {
            keyClick(e){
                this.number +=e;
            },
            numberDelete(){
                this.number = this.number.substr(0,this.number.length-1);
            },
			save() {

			}
		},
	}
</script>
<style scoped>
	.layui-input,
	.layui-textarea {
		display: block;
		width: 100%;
		padding-left: 10px;
		outline: none;
	}

	.layui-input,
	.layui-select,
	.layui-textarea {
		height: 38px;
		line-height: 1.3;
		line-height: 38px\9;
		border-width: 1px;
		border-style: solid;
		background-color: #fff;
		border-radius: 2px;
	}

	.layui-icon {
		font-family: layui-icon !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.layui-row:after,
	.layui-row:before {
		content: '';
		display: block;
		clear: both;
	}

	.layui-col-xs8 {
		width: 66.66666667%;
	}

	.layui-col-xs12,
	.layui-col-xs4,
	.layui-col-xs8 {
		float: left;
	}

	.layui-col-xs12,
	.layui-col-xs4,
	.layui-col-xs8 {
		position: relative;
		display: block;
		box-sizing: border-box;
	}

	.layui-col-xs4 {
		width: 33.33333333%;
	}

	.layui-bg-blue {
		background-color: #1E9FFF !important;
	}

	.layui-col-xs1,
	.layui-col-xs10,
	.layui-col-xs11,
	.layui-col-xs12,
	.layui-col-xs2,
	.layui-col-xs3,
	.layui-col-xs4,
	.layui-col-xs5,
	.layui-col-xs6,
	.layui-col-xs7,
	.layui-col-xs8,
	.layui-col-xs9 {
		float: left;
	}

	.layui-col-xs12 {
		width: 100%;
	}

	.layui-row:after,
	.layui-row:before {
		content: '';
		display: block;
		clear: both;
	}

	:after,
	:before {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.layui-bg-green {
		background-color: #009688 !important;
	}

	.layui-bg-black,
	.layui-bg-blue,
	.layui-bg-cyan,
	.layui-bg-green,
	.layui-bg-orange,
	.layui-bg-red {
		color: #fff !important;
	}

	#keycodebox {
		width: 300px;
		padding: 10px;
		background: #eaeaea
	}

	#keycodebox .inp {
		position: relative;
		padding-right: 38px;
		background: #fff
	}

	#keycodebox .inp .layui-icon {
		height: 38px;
		line-height: 44px;
		width: 38px;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 24px;
		color: #c2c2c2
	}

	#keycodebox .inp input {
		border: none;
		text-align: right;
		font-size: 16px;
		font-weight: 600
	}

	#keycode .item {
		position: relative;
		cursor: pointer;
	}

	#keycode .item::before {
		content: "";
		padding-top: 100%;
		display: block;
		vertical-align: middle;
	}

	#keycode .item2::before {
		content: "";
		padding-top: 50%;
		display: block;
		vertical-align: middle;
	}

	#keycode .item4::before {
		content: "";
		padding-top: 175%;
		display: block;
		vertical-align: middle;
	}

	#keycode .item4 span,
	#keycode .item3 span,
	#keycode .item2 span,
	#keycode .item span {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 3px;
		left: 3px;
		right: 3px;
		bottom: 3px;
		background: #fff;
		text-align: center;
		border-radius: 6px;
		font-size: 18px;
		font-weight: 600
    }
/* 禁止显示上下箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
   -webkit-appearance: none !important;
   margin: 0;
}
input[type="number"]{-moz-appearance:textfield;}
.item3{
    cursor: pointer;
}
</style>